{% extends "base.html" %}

{% block title %}私聊 - {{ peer_name }}{% endblock %}

{% block extra_css %}
<style>
    /* 私聊页面样式 */
    .private-chat-container {
        max-width: 800px;
        margin: 2rem auto;
        padding: 2rem;
        background: var(--card-bg);
        border-radius: var(--border-radius);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .chat-header {
        text-align: center;
        margin-bottom: 2rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .chat-title {
        color: var(--accent);
        font-size: 1.8rem;
    }

    /* 聊天框样式 */
    .chat-box {
        background: rgba(255, 255, 255, 0.03);
        border-radius: var(--border-radius);
        padding: 1.5rem;
        height: 60vh;
        overflow-y: auto;
        margin-bottom: 1.5rem;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* 消息样式 */
    .message {
        margin-bottom: 1rem;
        padding: 0.75rem 1rem;
        border-radius: var(--border-radius);
        max-width: 80%;
        position: relative;
        animation: fadeIn 0.3s ease;
    }

    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .received-message {
        background: rgba(255, 255, 255, 0.05);
        align-self: flex-start;
        border-bottom-left-radius: 4px;
    }

    .sent-message {
        background: rgba(67, 97, 238, 0.15);
        align-self: flex-end;
        border-bottom-right-radius: 4px;
        margin-left: auto;
    }

    .message-sender {
        font-weight: 600;
        color: var(--accent);
        margin-bottom: 0.25rem;
    }

    .message-content {
        line-height: 1.5;
    }

    .message-time {
        color: var(--gray);
        font-size: 0.8rem;
        margin-top: 0.25rem;
        text-align: right;
    }

    /* 输入区域 */
    .input-area {
        display: flex;
        gap: 0.75rem;
        margin-top: 1.5rem;
    }

    #message {
        flex-grow: 1;
        padding: 0.75rem 1rem;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: var(--border-radius);
        color: var(--light);
        font-size: 1rem;
        outline: none;
        transition: var(--transition);
    }

    #message:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 2px rgba(67, 97, 238, 0.2);
    }

    #sendBtn {
        padding: 0.75rem 1.5rem;
        background: var(--primary);
        color: white;
        border: none;
        border-radius: var(--border-radius);
        font-weight: 600;
        cursor: pointer;
        transition: var(--transition);
    }

    #sendBtn:hover {
        background: var(--secondary);
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(67, 97, 238, 0.3);
    }

    /* 空状态提示 */
    .empty-state {
        color: var(--gray);
        text-align: center;
        padding: 2rem;
    }

    /* 响应式设计 */
    @media (max-width: 768px) {
        .private-chat-container {
            padding: 1rem;
            margin: 1rem;
        }

        .chat-title {
            font-size: 1.5rem;
        }

        .chat-box {
            height: 50vh;
        }

        .input-area {
            flex-direction: column;
        }

        #sendBtn {
            width: 100%;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="private-chat-container">
    <div class="chat-header">
        <h2 class="chat-title">与 {{ peer_name }} 私聊</h2>
    </div>

    <div id="chat-box" class="chat-box" data-room-key="{{ room_key }}" data-peer-id="{{ peer_id }}">
        {% if msg %}
            {% for m in msg %}
                <div class="message {% if m.sender__username == request.user.username %}sent-message{% else %}received-message{% endif %}">
                    <div class="message-sender">{{ m.sender__username }}</div>
                    <div class="message-content">{{ m.content }}</div>
                    <div class="message-time">{{ m.timestamp }}</div>
                </div>
            {% endfor %}
        {% else %}
            <div class="empty-state">暂无消息，开始你们的对话吧</div>
        {% endif %}
    </div>

    <div class="input-area">
        <input type="text" id="message" name="message" placeholder="输入消息..." autocomplete="off">
        <button type="submit" id="sendBtn">发送</button>
    </div>
</div>

<script>
    document.addEventListener("DOMContentLoaded", () => {
        const chatBox = document.getElementById('chat-box');
        const roomKey = chatBox.dataset.roomKey;
        const peerId = chatBox.dataset.peerId;
        const messageInput = document.getElementById('message');
        const sendBtn = document.getElementById('sendBtn');

        // 自动滚动到底部
        chatBox.scrollTop = chatBox.scrollHeight;

        const chatWebsocket = new WebSocket(`ws://${window.location.host}/ws/privatechat/${roomKey}/${peerId}`);

        chatWebsocket.onopen = () => console.log('私聊连接已建立');

        chatWebsocket.onmessage = (e) => {
            const data = JSON.parse(e.data);
            if (data.type == "private_message") {
                const messageDiv = document.createElement('div');
                const isCurrentUser = data.sender_name == "{{ request.user.username }}";

                messageDiv.className = isCurrentUser ? 'message sent-message' : 'message received-message';
                messageDiv.innerHTML = `
                    <div class="message-sender">${data.sender_name}</div>
                    <div class="message-content">${data.message}</div>
                    <div class="message-time">${data.timestamp}</div>
                `;

                chatBox.appendChild(messageDiv);
                chatBox.scrollTop = chatBox.scrollHeight;

                // 如果当前是空状态，移除空状态提示
                const emptyState = chatBox.querySelector('.empty-state');
                if (emptyState) {
                    emptyState.remove();
                }
            }
        };

        // 发送消息函数
        const sendMessage = () => {
            const msg = messageInput.value.trim();
            if (msg) {
                chatWebsocket.send(JSON.stringify({
                    'message': msg
                }));
                messageInput.value = "";
                messageInput.focus();
            }
        };

        // 点击发送按钮
        sendBtn.addEventListener('click', sendMessage);

        // 按回车发送消息
        messageInput.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') {
                sendMessage();
            }
        });

        // 页面关闭时关闭WebSocket连接
        window.addEventListener('beforeunload', () => {
            chatWebsocket.close();
        });
    });
</script>
{% endblock %}